import React from 'react'
import styled from 'styled-components'

import Flex from '../Flex/'
import Text from '../Text/'
import Config from '../../utils/config'
import Color from '../Color'
import { fadeAndScaleIn } from '../Animation/'

const Toast = styled(Flex)`
    position: relative;
    min-width: 100px;
    background: rgb(255, 255, 255);
    color: #000;
    padding: 20px 32px;
    border: 2px solid ${Color.primary};
    border-radius: 10px;
    animation: ${fadeAndScaleIn} 1s;
    &:before {
        position: absolute;
        top: -20px;
        left: 0px;
        content: '';
        width: 20px;
        height: 20px;
        background-color: ${Color.primary};
        clip-path: polygon(0% 100%, 0% 0%, 80% 100%);
    }
    &:after {
        position: absolute;
        top: -20px;
        right: 0px;
        content: '';
        width: 20px;
        height: 20px;
        background-color: ${Color.primary};
        clip-path: polygon(100% 100%, 100% 0%, 20% 100%);
    }
`
const Wrap = styled(Flex)`
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    opacity: ${({ showToast }) => (showToast ? 1 : 0)};
    transition: opacity 1s ease-out;
    z-index: ${Config.toastIndex};
`

  let Toasts = ({ children, onClick, successIcon, errorIcon, ...props }) => (
    <Wrap center auto {...props}>
        <Toast column center onClick={() => onClick()}>
            <Text type="medium" color="#999">
                {children}
            </Text>
        </Toast>
    </Wrap>
)

export default Toasts




// WEBPACK FOOTER //
// ./src/components/Toast/index.js